<template>
    <div>
        <hs-breadcrumb :breadcrumb="breadcrumb"></hs-breadcrumb>

        <Card :bordered="false" :style="{marginBottom:'10px'}">
            <!--标题-->
            <div slot="title">
                <div class="hs-screen-box">
                    <div>运费模板列表</div>
                    <div>
                        <ButtonGroup>
                            <Button @click="queryFreight">
                                <Icon type="md-refresh" size="15"/>
                            </Button>
                            <Button @click="showFreightOpe(2)">新增运费模板</Button>
                        </ButtonGroup>
                    </div>
                </div>
            </div>
            <!--表格数据-->
            <Table :columns="columns" :data="data" size="small" :stripe="true" :loading="isTableLoading">

                <template slot-scope="{ row, index }" slot="isDisable">
                    <Tag color="green" v-if="row.isDisable === 0" size="default">启用</Tag>
                    <Tag color="volcano" v-if="row.isDisable === 1" size="default">禁用</Tag>
                </template>

                <template slot-scope="{ row }" slot="action">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="showFreightOpe(3, row)">编辑
                    </Button>
                    <Button type="error" size="small" style="margin-right: 5px" @click="isDelUser(row)">删除
                    </Button>
                </template>
            </Table>
            <!--分页-->
            <div class="hs-page">
                <Page :total="total" show-sizer show-total transfer @on-change="changePage"
                      @on-page-size-change="changePageSize"/>
            </div>
        </Card>

        <!--显示模态框-->
        <freight-ope ref="freightOpe" @changeDate="queryFreight" :regionList="regionList"></freight-ope>
    </div>
</template>

<script>
    import hsBreadcrumb from '@/components/hs-breadcrumb';
    import freightOpe from './components/freight-ope';

    export default {
        name: "freight",
        data() {
            return {
                total: 0,
                isTableLoading: false,
                regionList: [],
                // 参数
                params: {
                    page: 1,
                    rows: 10,
                },
                // 表格列
                columns: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: 'ID',
                        minWidth: 120,
                        key: 'freightId'
                    },
                    {
                        title: '模板名称',
                        minWidth: 180,
                        key: 'freightName'
                    },
                    {
                        title: '默认首件',
                        minWidth: 120,
                        key: 'firstNum'
                    },
                    {
                        title: '默认首费（元）',
                        minWidth: 120,
                        key: 'firstPrice'
                    },
                    {
                        title: '默认续件',
                        minWidth: 120,
                        key: 'nextNum'
                    },
                    {
                        title: '默认续费（元）',
                        minWidth: 120,
                        key: 'nextPrice'
                    },
                    {
                        title: '状态',
                        slot: 'isDisable',
                        align: 'center',
                        width: 120
                    },
                    {
                        title: '创建时间',
                        key: 'createTime',
                        width: 150
                    },
                    {
                        title: '操作',
                        slot: 'action',
                        width: 180,
                        align: 'center'
                    }
                ],
                // 表格数据
                data: [],
                // 面包屑
                breadcrumb: [
                    {name: '首页', url: '', icon: 'ios-home-outline', size: 18},
                    {name: '系统管理', url: '', icon: '', size: 0},
                    {name: '运费模板列表', url: '', icon: '', size: 0}
                ]
            }
        },
        created() {
            // 运费模板-列表查询
            this.queryFreight();
            // 查询行政区划
            this.findRegion();
        },
        methods: {
            // 运费模板-列表查询
            queryFreight() {
                this.isTableLoading = true;
                this.axios.post('/freight/queryFreight', this.params).then(res => {
                    
                    this.isTableLoading = false;
                    if (res.status == 200) {
                        this.total = res.data.total;
                        this.data = res.data.rows;
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '查询运费模板列表接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 查询行政区划
            findRegion(row) {
                this.$Spin.show();
                this.axios.post('/region/findRegion', {
                    parentId: 0
                }).then(res => {
                    
                    setTimeout(() => {
                        this.$Spin.hide();
                    }, 300);
                    if (res.status == 200) {
                        // this.$Message.success('操作成功.');
                        this.regionList = res.data;
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '查看行政区划接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 是否删除运费模板
            isDelUser(row) {
                // console.log(row)
                this.$Modal.confirm({
                    title: `是否删除运费模板${row.freightName}？`,
                    onOk: () => {
                        // this.$Message.info('您点击了确定.');
                        this.deleteFreight(row);
                    },
                    onCancel: () => {
                        this.$Message.info('您点击了取消.');
                    }
                });
            },
            // 删除运费模板
            deleteFreight(row) {
                this.$Spin.show();
                this.axios.post('/freight/deleteFreight', {
                    freightId: row.freightId
                }).then(res => {
                    
                    setTimeout(() => {
                        this.$Spin.hide();
                    }, 300);
                    if (res.status == 200) {
                        this.$Message.success('操作成功.');
                        this.queryFreight();
                    }
                    if (res.status == 201) {
                        // this.$Message.error(res.msg);
                        this.$Notice.error({
                            title: '删除运费模板失败',
                            desc: res.msg
                        });
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '删除运费模板接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 显示操作模态框
            showFreightOpe(type, row) {
                /**
                 * type判断
                 * 1.查看 2.新增 3.编辑
                 */
                this.$refs.freightOpe.show(type, row);
            },
            // 改变页数
            changePage(e) {
                this.params.page = e;
                this.queryFreight();
            },
            // 改变页容量
            changePageSize(e) {
                this.params.rows = e;
                this.queryFreight();
            },
        },
        components: {
            hsBreadcrumb,
            freightOpe
        }
    }
</script>

<style scoped>

</style>